<template>
	<view>
		<view class="">
			<view class="" style="background-color: coral;height: 20vh;position: relative;">
				<view class="container"
					style="position: absolute; bottom: 20px; left: 0; width: 50%; margin-left: 10px;">
					<view class="" style="display: flex;align-items: center;position: relative;overflow: hidden;">
						<image src="../../static/ui/hotjinhao.png" style="width: 30px; height: 30px;" mode=""></image>
						<span
							style="z-index: 999;position: relative;font-size: 44rpx; font-weight: 1000;margin-left: 4px;">{{topicTitle1}}</span>
						<text
							style="width: 100%;height: 12rpx;background: #1694cd;position: absolute;bottom: 3px;z-index: 0;left: 30px;"
							class="borderText"></text>
					</view>
					<view class="" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
						<span class="myspan"
							style="max-width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: inline-block;z-index: 999;position: relative;font-size: 44rpx; font-weight: 1000;">{{topicTitle2}}</span>
						<text :style="'width: ' + textWidth + 'px;'"
							style="height: 12rpx;background: #1694cd;position: absolute;bottom: 3px;z-index: 0;left: 0;"
							class="borderText"></text>

					</view>
				</view>

				<view class=""
					style="display: flex;justify-content: space-between;color: black;position: fixed;top: 0;margin-top: 20px;width: 100%;padding: 0 10px;">
					<u-icon size="55" name="arrow-left" @click="backtoItem"></u-icon>
					<u-icon size="55" name="more-dot-fill"></u-icon>
				</view>

			</view>
			<view class="">

				<!-- 上 -->
				<view class="" style="">

					<view class="" style="display: flex;align-items: center;margin-top: 6px;padding: 10px 10px 0 10px;">

						<image src="@/static/ali/qiqiu.png" style="height: 20px;width: 20px;" mode=""></image>
						<span style="margin-left:5px;">{{topicInfo.popularity}}人气</span>
						<span style="margin: 0 5px;">|</span>
						<span style="margin: 0 4px;">{{topicInfo.viewCount}}浏览</span>

					</view>

					<!-- 文字 -->
					<view class="" style="padding: 10px 10px 0 10px;">
						{{topicInfo.subheading}}
					</view>

					<!-- 轮播相关热点 -->
					<view class="" style="padding: 10px 10px 0 10px;">
						<scroll-view scroll-x="true" class="scrollView">
							<view class="scrollItem" v-for="(topicItem,index) in relativeTopicList" :key="topicItem.id"
								style="margin-left: 5px;">
								<view class="" style="display: flex;align-items: center;padding: 5px 20px 5px 5px;">
									<image src="@/static/ui/jinhao.png" style="width: 20px;height: 20px;"></image>
									<p style="margin-left: 4px;">{{topicItem.title}}</p>
								</view>

							</view>

						</scroll-view>
					</view>

					<!--按钮 -->
					<view class="" style="display: flex;margin-top: 10px;z-index: 99;padding: 10px 10px 0 0;">
						<view v-for="(buttonItem,indexb) in topicInfo.topicInnerSortList" :key="indexb"
							:style="{ backgroundColor: currentTab === indexb ? '#ffff00' : 'white',fontWeight: currentTab === indexb ? 'bold' : '' }"
							style="border-radius: 20px;color: black;padding: 5px 13px;margin-left: 12px;"
							@click="changeCurrentTab">
							{{buttonItem}}
						</view>

					</view>



				</view>

				<!-- 下 -->
				<swiper :current="currentTab"
					:style="{height:currentTab === 0 ?swiperHeight1+'px' : swiperHeight2+'px'}"
					@change="changeSwiperItem" style="margin-top: 15px;">
					<swiper-item>
						<view class="swiperItem1">
							<view class="" style="background-color: white;margin: 0 10px;">
								<Dynamic v-if="clickSkuInfo.id" :price="clickSkuInfo.price"
									:imgList="clickSkuInfo.imgList" :avatar="clickSkuInfo.avatar"
									:name="clickSkuInfo.name" :publishTime="clickSkuInfo.publishTime"
									:content="clickSkuInfo.content" :topicList="clickSkuInfo.topicList"
									@clickTaolun="clickTaolun(clickSkuInfo)">
								</Dynamic>
								<Dynamic v-for="(item,index) in list" :key="index" :price="item.price"
									:imgList="item.imgList" :avatar="item.avatar" :name="item.name"
									:publishTime="item.publishTime" :topicList="item.topicList" :content="item.content"
									:isLike="item.isLike" :isGiveReward="item.isGiveReward"
									:likeNumber="item.likeNumber" :giveRewardNumber="item.giveRewardNumber"
									:chatNumber="item.chatNumber" @clickTaolun="clickTaolun(item)">
								</Dynamic>
							</view>
						</view>

					</swiper-item>
					<swiper-item>
						<view class="swiperItem2">
							<view class="" style="background-color: white;margin: 0 10px;">
								<Dynamic v-for="(item,index) in newList" :key="index" :price="item.price"
									:imgList="item.imgList" :avatar="item.avatar" :name="item.name"
									:publishTime="item.publishTime" :content="item.content" :topicList="item.topicList"
									@clickTaolun="clickTaolun(item)">
								</Dynamic>
							</view>

						</view>

					</swiper-item>
				</swiper>


			</view>

			<popupComponent v-if="popupShow" ref="popupComponent"></popupComponent>

		</view>


	</view>
</template>

<script>
	import Dynamic from '../../components/qizai-dynamic/Dynamic.vue'
	import popupComponent from './components/popupComponent.vue'
	export default {
		components: {
			Dynamic,
			popupComponent
		},
		data() {
			return {
				textWidth: 0,
				swiperHeight1: 0,
				swiperHeight2: 0,
				currentTab: 0,
				list: [],
				newList: [],
				topicInfo: {},
				clickSkuInfo: {},
				current1: 1,
				current2: 1,
				pages1: 1,
				pages2: 1,
				relativeTopicList: [],
				scrollTop: 0,
				
				popupShow:false,
			};
		},
		mounted() {
			this.getTextWidth();

			if (this.clickSkuInfo.id) {
				//如果是点击sku进来的话,需要通知后端去重
				this.getTopicDetail(this.topicInfo.id, 0, this.clickSkuInfo.id)
			} else {
				//如果是点击话题进来的话，发送请求带参数topicId,sort
				this.getTopicDetail(this.topicInfo.id)
			}
			//发送对最新的数据请求
			this.getTopicDetail(this.topicInfo.id, 1)

		},
		computed: {
			topicTitle1() {
				if (this.topicInfo.title.length > 6) {
					return this.topicInfo.title.slice(0, 6);
				} else {
					return this.topicInfo.title;
				}
			},
			topicTitle2() {
				if (this.topicInfo.title.length > 6) {
					return this.topicInfo.title.slice(5);
				} else {
					return '';
				}
			},

		},
		methods: {
			getTextWidth() {
				const query = uni.createSelectorQuery().in(this);
				query
					.select(".myspan")
					.boundingClientRect((data) => {
						this.textWidth = data.width
					})
					.exec();

			},

			changeCurrentTab() {
				this.currentTab = this.currentTab === 0 ? 1 : 0
			},
			changeSwiperItem(e) {
				//换
				this.currentTab = e.detail.current
			},
			initSwiperHeightListener(flag) {
				setTimeout(() => {
					uni.createSelectorQuery().select('.swiperItem' + flag).boundingClientRect(rect => {
						if (flag === 1) {
							this.swiperHeight1 = rect.height;

						} else if (flag === 2) {

							this.swiperHeight2 = rect.height;
						}
					}).exec()
				}, 100)

			},
			//flag表示是否去除点击进入的sku
			//sort为热门还是新发
			async getTopicDetail(topicId, sort = 0, skuId) {
				if (sort === 0) {
					if (this.current1 <= this.pages1) {
						let form = {
							current: this.current1,
							size: 5,
							topicId: topicId,
							clickSkuId: skuId,
							sort: sort
						}
						this.current1++

						//如果是热门
						let result = await this.$u.api.getTopicDetail(form)
						this.pages1 = result.pages
						this.list = this.list.concat(result.records.map((item) => {
							return {
								id: item.id,
								avatar: item.photoUrl,
								name: item.nickName,
								publishTime: item.createTime,
								content: item.content,
								imgList: item.imgUrlList,
								price: item.price,
								topicList: item.topicList
							};
						}))
						this.initSwiperHeightListener(1);
					}

				} else if (sort === 1) {
					if (this.current2 <= this.pages2) {
						let form = {
							current: this.current2,
							size: 3,
							topicId: topicId,
							clickSkuId: skuId,
							sort: sort
						}
						this.current2++
						//如果是最新
						let result = await this.$u.api.getTopicDetail(form)
						this.pages2 = result.pages
						this.newList = this.newList.concat(result.records.map((item) => {
							return {
								id: item.id,
								avatar: item.photoUrl,
								name: item.nickName,
								publishTime: item.createTime,
								content: item.content,
								imgList: item.imgUrlList,
								price: item.price,
								topicList: item.topicList
							};
						}))
						this.initSwiperHeightListener(2);
					}
				}
			},
			backtoItem() {
				uni.navigateBack()
			},

			//点击显示讨论弹出层
			clickTaolun(item) {
				this.popupShow = true
				this.$nextTick(() => {
				//触发子组件
				this.$refs.popupComponent.toPopupShow(item)
				})
			},
		},
		onLoad: function(option) {
			this.topicInfo = JSON.parse(decodeURIComponent(option.topicInfo))

			if (option.relativeTopic) {
				this.relativeTopicList = JSON.parse(decodeURIComponent(option.relativeTopic))

			}
			if (option.topicSkuInfo) {
				const skuInfo = JSON.parse(decodeURIComponent(option.topicSkuInfo))
				this.clickSkuInfo = {
					id: skuInfo.id,
					avatar: skuInfo.photoUrl,
					name: skuInfo.nickName,
					publishTime: skuInfo.createTime,
					content: skuInfo.content,
					imgList: skuInfo.imgUrlList,
					price: skuInfo.price,
					topicList: skuInfo.topicList
				}
			}


		},

		onReachBottom() {
			if (this.clickSkuInfo.id) {
				if (this.currentTab === 1) {
					//最新的触底不能排除点击的元素
					this.getTopicDetail(this.topicInfo.id, this.currentTab)

				} else {

					this.getTopicDetail(this.topicInfo.id, this.currentTab, this.clickSkuInfo.id)
				}

			} else {
				this.getTopicDetail(this.topicInfo.id, this.currentTab)
			}
		},
		onPageScroll(e) {
			console.log(e.scrollTop);
			this.scrollTop = e.scrollTop
		}
	}
</script>

<style lang="scss" scoped>
	.scrollView {
		width: 100%;
		white-space: nowrap;

		.scrollItem {
			display: inline-block;

			border-radius: 20px;
			background-color: #ccc;

			// p{
			// 	margin-left: 5px;
			// }
		}
	}
</style>